<script setup>
import {FwbInput , FwbModal} from "flowbite-vue";
import {ref} from "vue";
import SvgIcon from "@/components/SvgIcon.vue";

const isShowModal = ref(false)
const closeModal = () => {
  isShowModal.value = false
}
const showModal = () => {
  isShowModal.value = true
}
const Random = (arr) => {
  return arr[Math.floor(Math.random() * arr.length)];
};
const checkAll = ref(true)
const checkDete = ref(false)
const checkList = ref([]);
for (let i = 0; i < 10; i++) {
  checkList.value.push({
    id: i + 1,
    camera: `Camera 00${i + 1}`,
    location: `Location ${i + 1}`,
    checked: true,
  });
}
const course = ref(1)
const DeleteCameras = () => {
  course.value = 2
}
defineExpose({
  showModal,
})
</script>

<template>
  <fwb-modal v-if="isShowModal" @close="closeModal" size="md" id="CreateModal">
    <template #header>
      <div :class="['text-lg flex flex-col text-sm text-[var(--modalFontColor)] font-[500] font-Medium', course == 2 ? 'ml-[25px]':'']">
        <svg-icon v-if="course == 2" @click="course = 1" name="back" width="12px" height="9px" class="text-[var(--date)] cursor-pointer absolute left-[15px] top-[25px] s4k:top-[35px]"></svg-icon>
        <div>
          <p class="text-md">Delete Cameras</p>
          <p class="text-sm">Step {{ course }}/2</p>
        </div>
      </div>
    </template>

    <template #body>
      <div class="absolute w-full h-[1px] bg-[var(--theme-button-bg)] top-[60px] left-0 s4k:top-[80px]"></div>
      <div class="w-full h-[72px] flex flex-col justify-center items-start">
        <p class="text-[20px] font-[600] font-Inter text-[var(--theme-font-color)]">{{course == 1?'Choose Cameras to Delete':'Confirm Delete Cameras?'}}</p>
      </div>
      <div v-if="course == 1" class="w-full h-[357px] border-[var(--grid)] border border-solid mb-[150px]">
        <div class="w-full h-[51px] bg-[var(--theme-search-bg)] text-sm text-[#9CA3AF] font-[700] font-Medium flex flex-row justify-start items-center ">
          <div class="w-[40px] text-center">
            <input type="checkbox" v-model="checkAll" class="w-[16px] h-[16px] rounded bg-[var(--grid)] cursor-pointer">
          </div>
          <div class="w-[200px] h-full leading-[60px] pl-[16px] flex flex-row justify-start items-center">CAMERA</div>
          <div class="w-[200px] h-full leading-[60px] pl-[16px] flex flex-row justify-start items-center ">LOCATION</div>
        </div>
        <div id="list" class="w-full h-[308px]">
          <div class="w-full h-[50px] border-b border-solid border-[var(--grid)] text-md text-[#9CA3AF] font-[500] font-Medium flex flex-row justify-start items-center" v-for="item in checkList" :key="item.id">
            <div class="w-[40px] text-center">
              <input type="checkbox" v-model="item.checked" class="w-[16px] h-[16px] rounded bg-[var(--grid)] cursor-pointer">
            </div>
            <div class="w-[200px] h-full pl-[16px] flex flex-row justify-start items-center themeFontColor">{{item.camera}}</div>
            <div class="w-[200px] h-full pl-[16px] flex flex-row justify-start items-center">{{item.location}}</div>
          </div>
        </div>
        <p class="text-[14px] text-[var(--theme-font-desc-color)] font-[500] font-Medium my-[24px]">Delete 0 cameras</p>
        <div class="flex flex-row justify-start items-center">
          <input type="checkbox" v-model="checkDete" class="w-[16px] h-[16px] rounded bg-[var(--grid)] cursor-pointer">
          <span class="text-[14px] text-[var(--theme-font-color)] font-[500] font-Medium ml-[10px]">Delete History with Cameras</span>
        </div>
      </div>
      <div v-else>
        <div class="mb-[80px] text-[14px] text-[var(--theme-font-desc-color)] font-[500] font-Medium">Are you sure you wish to delete these 4 cameras? You will not be able to undo this action once it is done.</div>
      </div>
    </template>
    <template #footer>
      <div
        class="absolute bottom-0 left-0 w-full h-[81px] border-t border-solid border-[var(--grid)] z-[999] flex flex-row justify-start items-center ">
        <div @click="DeleteCameras"
          class="w-[160px] h-[41px] font-[600] text-white font-Inter text-md bg-[#E02424] rounded-lg flex ml-[12px] cursor-pointer s4k:rounded-[8px]">
          <span class="m-auto">Delete Cameras</span></div>
        <div v-show="course == 2"
             class="w-[160px] h-[41px] font-[600] text-white font-Inter text-md bg-[var(--theme-button-bg)] rounded-lg flex ml-[12px] cursor-pointer s4k:rounded-[8px]">
          <span class="m-auto">Do not Delete</span></div>
      </div>
    </template>
  </fwb-modal>
</template>

<style scoped lang="scss">
#CreateModal {
  :deep(.max-w-md) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    max-width: 576px;
    height: auto;
    //height: 656px;

    button {
      cursor: pointer;

      &:hover {
        background: var(--theme);
      }

      svg {
        color: #6B7280;
      }
    }

    .bg-white {
      width: 100%;
      height: 100%;
      background-color: var(--theme);
    }

    .p-6 {
      padding-left: 12px;
      padding-right: 12px;
      padding-top: 0;
    }
  }
}

#input {
  margin-left: 16px;

  :deep(input) {
    width: 327px;
    height: 35px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14px;
    color: #9CA3AF;
    background: var(--theme);
    border: solid 1px var(--grid);

    &:focus {
      outline: none;
      box-shadow: inset 0 0;
    }
  }
}
@media screen and (min-width: 2560px) {
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(1.5);
    }
  }
}
@media screen and (min-width: 3840px) {
  //#CreateModal {
  //  :deep(.max-w-md) {
  //    max-width: 1270px;
  //    height: 1712px;
  //
  //    button {
  //      svg {
  //        transform: scale(2);
  //      }
  //    }
  //
  //    .p-6 {
  //      padding-left: 2rem;
  //      padding-right: 2rem;
  //
  //      .list {
  //        overflow-y: scroll;
  //        scrollbar-width: none;
  //        -ms-overflow-style: none;
  //      }
  //    }
  //  }
  //}
  //#input {
  //  margin-left: 32px;
  //
  //  :deep(input) {
  //    width: 654px;
  //    height: 70px;
  //    font-size: 28px;
  //  }
  //}
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(2);
      .p-4{
        padding: 0.8rem;
      }
      .p-6 {
        padding: 1rem;
        margin-top: -20px;
        margin-bottom: 10px;
        input[type="checkbox"] {
          border-radius: 5px;
        }
      }
    }
  }
}
</style>